


/*===========================
    4.SERVICES css 
===========================*/




.services-area{
	margin-top: -70px;
	z-index: 11;
	position: relative;
	padding-bottom: 120px;
	& .services-shape{
		position: absolute;
		top: 150px;
		left: 0;
		z-index: -1;
	}
	& .services-bg{
		position: relative;
		&::before{
			position: absolute;
			content: '';
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			height: 100%;
			width: 110%;
			border-top: 10px solid $theme-color;
			background: $white;
			@media #{$laptop} {
				width: 102%;
			}
		}
		& .services-item{
			position: relative;
			overflow: hidden;
			z-index: 10;
			& .icon{
				position: absolute;
				left: 50%;
				top: 50%;
				@include transform(translate(-50%, -50%) scale(1));
				height: 100px;
				width: 100px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				background: $theme-color;
				border-bottom: 3px solid #fff;
				@include transition(0.3s);
				z-index: 5;
				& i{
					font-size: 60px;
					color: $white;
					line-height: 58px;
				}
			}
			& .services-overlay{
				position: absolute;
				left: 0;
				top: 100%;
				height: 100%;
				width: 100%;
				background-color: rgba(25, 36, 55,.8);
				z-index: 6;
				padding-left: 40px;
				padding-top: 36px;
				padding-right: 35px;
				letter-spacing: 0.4px;
				@include transition(0.5s);
				@media #{$lg} {
					padding-left: 15px;
					padding-right: 15px;
				}
				@media #{$xs} {
					padding: 20px 20px 0;
				}
				& .title{
					color: $white;
					font-size: 20px;
					font-weight: 400;
					text-transform: uppercase;
					@media #{$lg} {
						font-size: 18px;
					}
				}
				& p{
					color: $white;
					font-weight: 300;
					line-height: 34px;
					padding-top: 26px;
					padding-bottom: 29px;
					margin-right: 5px;
				}
				& a{
					font-size: 14px;
					font-weight: 700;
					text-transform: uppercase;
					color: $theme-color;
					letter-spacing: 1px;
					position: relative;
					padding-left: 25px;
					&::before{
						position: absolute;
						content: '';
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 2px;
						width: 16px;
						background: $theme-color;
					}
				}
			}
			& img{
				width: 100%;
			}
			&:hover{
				& .icon{
					@include transform(translate(-50%, -50%) scale(0));
					
				}
				& .services-overlay{
					top: 0;
				}
			}
		}
	}
}







.industri-services-area{
	background: #f4f4f5;
	padding-top: 106px;
	padding-bottom: 120px;
	& .services-title{
		padding-bottom: 23px;
		& .title{
			font-size: 50px;
			text-transform: uppercase;
			font-weight: 400;
		}
	}
	& .services-item{
		@include transition(0.3s);
		& .services-thumb{
			position: relative;		
			z-index: 10;	
			& .icon{
				position: absolute;
				left: 50px;
				bottom: -40px;
				height: 100px;
				width: 100px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				background: $white;
				border-bottom: 3px solid #192437;
				@include transition(0.3s);
				z-index: 5;
				@media #{$xs} {
					left: 30px;
					bottom: 0;
				}
				@media #{$sm} {
					left: 50px;
					bottom: -40px;
				}
				& i{
					font-size: 60px;
					color: #192437;
					line-height: 58px;
					@include transition(0.3s);
				}
			}
			& img{
				width: 100%;
			}
		}
		& .services-content{
			background: $white;
			border: 1px solid #eaeaea;
			padding: 65px 50px 45px;
			@media #{$lg} {
				padding: 65px 30px 45px;
			}
			@media #{$xs} {
				padding: 30px;
			}
			@media #{$sm} {
				padding: 65px 50px 45px;
			}
			& .title{
				font-size: 20px;
				text-transform: uppercase;
				font-weight: 400;
			}
			& p{
				line-height: 34px;
				color: #7f8692;
				font-weight: 300;
				padding-right: 10px;
				padding-top: 27px;
				padding-bottom: 22px;
			}
			& a{
				padding-left: 0px;
				font-size: 12px;
				font-weight: 700;
				color: $theme-color;
				text-transform: uppercase;
				position: relative;
				@include transition(0.3s);
				&::before{
					position: absolute;
					content: '';
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 2px;
					width: 15px;
					background: $theme-color;
					@include transition(0.3s);
					opacity: 0;
				}
				&:hover{
					padding-left: 25px;
					&::before{
						opacity: 1;
					}
				}
			}
		}
		&:hover{
			box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.04);
			& .services-thumb{
				& .icon{
					bottom: 46px;
					background: $theme-color;
					border-color: $white;
					& i{
						color: $white;
					}
				}
			}

		}
	}
	&.industri-services-2-area{
		padding-bottom: 153px;
		padding-top: 166px;
		position: relative;
		z-index: 10;
		& .shape{
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
		}
		& .industri-services-2-item{
			margin-bottom: 30px;
			background: $white;
			border: 1px solid #eaeaea;
			padding: 60px 78px 55px;
			@include transition(0.3s);
			@media #{$xs} {
				padding: 30px;
			}
			@media #{$sm} {
				padding: 60px;
			}
			& .icon{
				height: 100px;
				width: 100px;
				background: #f4f4f5;
				border-bottom: 3px solid #192437;
				@include transition(0.3s);
				display: inline-block;

				& i{
					font-size: 60px;
					color: #192437;
					line-height: 125px;
					@include transition(0.3s);
				}
			}
			& .title{
				font-weight: 400;
				font-size: 20px;
				text-transform: uppercase;
				padding-top: 35px;
			}
			& p{
				font-size: 18px;
				color: #7e8591;
				font-weight: 300;
				line-height: 34px;
				padding-top: 38px;
			}
			& a{
				font-size: 12px;
				font-weight: 700;
				text-transform: uppercase;
				color: $theme-color;
				letter-spacing: .4px;
				padding-left: 25px;
				position: relative;
				margin-top: 27px;
				&::before{
					position: absolute;
					content: '';
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 2px;
					width: 15px;
					background: $theme-color;
				}
			}
			&:hover{
				box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.04);
				& .icon{
					background: #192437;
					border-bottom-color: $theme-color;
					& i{
						color: $white;
					}
				}
			}
		}
		& .industri-active{
			& .slick-dots{
				position: absolute;
				left: 50%;
				bottom: -36px;
				transform: translateX(-50%);
				& li{
					display: inline-block;
					& button{
						font-size: 0;
						border: 0;
						height: 7px;
						width: 7px;
						border-radius: 50%;
						background: #b2b5bc;
						margin: 0 3px;
					}
					&.slick-active{
						& button{
							background: $theme-color;
						}
					}
				}
			}
		}
	}
	&.services-page{
		background-color: transparent;
		padding-top: 89px;
	}
}








.single-service-area{
	& .service-sidebar{
		& .service-sidebar-list{
			& ul{
				& li{
					& a{
						background: #f4f4f5;
						display: block;
						line-height: 75px;
						padding-left: 50px;
						margin-bottom: 2px;
						text-transform: uppercase;
						color: $heading-color;
						@include transition(0.3s);
						@media #{$lg} {
							padding-left: 30px;
						}
						&:hover{
							background: $theme-color;
							color: $white;
						}
					}
				}
			}
		}
		& .service-sidebar-help{
			margin-top: 28px;
			background: #192437;
			padding: 45px 50px 52px;
			@media #{$lg} {
				padding: 45px 30px 52px;
			}
			@media #{$xs} {
				padding: 30px;
			}
			@media #{$sm} {
				padding: 45px 50px 52px;
			}
			& .title{
				font-size: 20px;
				text-transform: uppercase;
				color: $white;
				font-weight: 400;
			}
			& p{
				font-size: 16px;
				line-height: 30px;
				font-weight: 300;
				color: #9aa3b2;
				padding-right: 30px;
				padding-bottom: 17px;
				padding-top: 34px;
				@media #{$lg} {
					padding-right: 0;
				}
				@media #{$xs} {
					padding-right: 0;
				}
			}
			& span{
				font-size: 26px;
				text-transform: uppercase;
				color: $white;
				padding-left: 52px;
				position: relative;
				@media #{$xs} {
					font-size: 22px;
				}

				& i{
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					font-size: 38px;
					color: $theme-color;
				}
			}
		}
	}
	& .single-project{
		& .single-project-thumb{
			& img{
				width: 100%;
			}
		}
		& .single-project-content{
			& .title{
				font-size: 40px;
				font-weight: 400;
				text-transform: uppercase;
				padding-top: 30px;
				@media #{$xs} {
					font-size: 28px;
				}
			}
			& p{
				color: #7f8692;
				line-height: 34px;
				font-size: 18px;
				font-weight: 300;
				padding-top: 36px;
				letter-spacing: .6px;
				padding-bottom: 25px;
			}
		}
		& .single-project-text{
			& p{
				color: #7f8692;
				line-height: 34px;
				font-size: 18px;
				font-weight: 300;
				padding-top: 48px;
				letter-spacing: .6px;
				padding-right: 20px;
				@media #{$lg} {
					padding-right: 0;
				}
				@media #{$md} {
					padding-right: 0;
				}
				@media #{$xs} {
					padding-right: 0;
				}
				&.text{
					padding-top: 33px;
				}

			}
		}
	}

}
